<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邮箱界面</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .nav a:hover
        {
            color: orange;
        }
    </style>

</head>
<body>
    
        <header class="header">
            <div class="head">
                <div class="logo">
                <img src="yunding.png" style="width: 62.2; height: 62.2;">
                <h3>欢迎回来</h3>
                </div>
                <img src="youshang.png" style="width: 20; height: 20;" class="youshang">
            </div>
            <nav class="nav">
                <ul>
                    <li><a href="#">今日</a></li>
                    <li><a href="#">资讯</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">校园</a></li>
                    <li><a href="#">我的</a></li>
                </ul>
            </nav>
        </header>
        </div> 

    <div class="container">
        <div class="sidebar">
            <img src="已读.png" class="avatar">
            <img src="未读.png" class="avatar">
        </div>
        

        <main class="main">
            <div class="search">
            <h2>邮箱动态-收件箱</h2>
            <div class="tu">
            <img src="shexiangtou.png">
            <img src="tongxunlu.png">
            </div>
            </div>
                <div class="biaoge">

            <div class="email-item">
                <img src="touxiang1.png" alt="头像" class="avatar">
                <div class="email-content">
		   <div class="a">
                    <p>邮件摘要信息...</p>
		    </div>
		    <div class="b">
                    <span class="date">2024.2.20</span>
		    </div>
		    <div class="c">
                    <span class="action"><a href="#">删除</a></span>
		    </div>
		    <div class="d">
                    <span class="action"><a href="#">回复</a></span>
		    </div>
                </div>
            </div>

		 <div class="email-item">
                <img src="touxiang2.png" alt="头像" class="avatar">
                <div class="email-content">
                    <p>邮件摘要信息...</p>
                    <span class="date">2024.2.20</span>
                    <span class="action"><a href="#">删除</a></span>
                    <span class="action"><a href="#">回复</a></span>
                </div>
            </div>

		 <div class="email-item">
                <img src="touxiang3.png" alt="头像" class="avatar">
                <div class="email-content">
                    <p>邮件摘要信息...</p>
                    <span class="date">2024.2.20</span>
                    <span class="action"><a href="#">删除</a></span>
                    <span class="action"><a href="#">回复</a></span>
                </div>
            </div>    
	    </div>
      </div>
    </div>
            <!-- 其他邮件项 -->
        </main>
    </div>
    <footer>
        <img src="bian.png" class="footer">
    </footer>
</body>
</html>